<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="disabledArray[0]"
      @click="handleAdd"
    >
      增 加
    </el-button>
    <el-button
      type="danger"
      icon="el-icon-delete"
      :disabled="disabledArray[1]"
      @click="handleDelete"
    >
      删 除
    </el-button>
    <el-button
      type="primary"
      icon="el-icon-video-play"
      :disabled="disabledArray[2]"
      @click="handleResourceAllocate"
    >
      分配资源
    </el-button>
    <el-button
      type="primary"
      icon="el-icon-user-solid"
      :disabled="disabledArray[3]"
      @click="handleUserAllocate"
    >
      分配用户
    </el-button>
    <el-button
      type="primary"
      icon="el-icon-refresh"
      @click="handleRefresh"
    >
      刷 新
    </el-button>
  </div>
</template>

<script>
/**
 * # 控制按钮组
 * 由`增加`、`删除`、`分配资源`、`分配用户`和`刷新`按钮组成的按钮组
 * | 按钮名称或描述 |                                         作用                                         |
 * | :------------: | :----------------------------------------------------------------------------------: |
 * |     `增加`     |                        打开`角色数据表单`，并使其处于增加模式                        |
 * |     `删除`     | 弹出确认对话框，并根据用户点击的按钮决定是否删除被勾选的`角色数据表格`的行的角色数据 |
 * |   `分配资源`   |                                   打开`分配资源器`                                   |
 * |   `分配用户`   |                                   打开`分配用户器`                                   |
 * |     `刷新`     |    重置页码、页面容量、表格数据、（由用户选择是否）清空被勾选项，重新获取表格数据    |
 */
export default {
  'name': 'ControlButtonGroup',

  'props': {
    /**
     * 按顺序设置`控制按钮组`中的按钮是否为不可用状态的数组
     * @type {[
     *   Boolean,
     *   Boolean,
     *   Boolean,
     *   Boolean,
     * ]}
     */
    'disabledArray': {
      'default' () {
        return Array(4).fill(false)
      },
      'type': Array,
    },
  },

  'methods': {
    /**
     * 处理`增加`按钮的点击事件
     */
    'handleAdd' () {
      this.$emit('add')
    },
    /**
     * 处理`删除`按钮的点击事件
     */
    'handleDelete' () {
      this.$emit('delete')
    },
    /**
     * 处理`刷新`按钮的点击事件
     */
    'handleRefresh' () {
      this.$emit('refresh')
    },
    /**
     * 处理`分配资源`按钮的点击事件
     */
    'handleResourceAllocate' () {
      this.$emit('resource-allocate')
    },
    /**
     * 处理`分配用户`按钮的点击事件
     */
    'handleUserAllocate' () {
      this.$emit('user-allocate')
    },
  },
}
</script>

<style scoped lang="scss">
</style>
